<template>
  <div id="line-chart"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "@/utils/resize";
import { getCurrentInstance } from "vue";
let myChart = shallowRef();
let num = 10;
let x = ref([
  "1月",
  "2月",
  "3月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月",
  "13月",
]);
let y1 = ref([3, 6, 8, 9, 335, 532, 532, 532, 53, 64, 13, 53, 53, 53]);
let y2 = ref([1, 35, 53, 6, 64, 32, 632, 63, 53, 67, 31, 76, 90, 53]);
let bar_waste_name = ref([]);

let props = defineProps(["lineChange", "bar_waste_name"]);
watch(
  () => props.lineChange,
  () => {
    x.value = props.lineChange.x;
    y1.value = props.lineChange.y1;
    y2.value = props.lineChange.y2;
    y3.value = props.lineChange.y3;
    bar_waste_name.value = props.bar_waste_name;
    getServerData();
  },
  { deep: true }
);
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("line-chart"));
  resize(myChart.value);
  // resize(myChart.value)
  getServerData();
});

let getServerData = () => {
  myChart.value.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
        snap: true, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
      },
      formatter: function (params) {
        console.log(params, "params");

        var relVal =
          params[0].name +
          "<br>" +
          "<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:#06FF34;'></span>&nbsp;" +
          params[0].seriesName +
          ":&nbsp;" +
          params[0].value +
          "℃" +
          "<br>" +
          "<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:#FFDA1C;'></span>&nbsp;" +
          params[1].seriesName +
          ":&nbsp;" +
          params[1].value +
          "℃";

        return relVal; //负数取绝对值变正数
      },
      textStyle: {
        color: "#666", // 文字的颜色
        fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
        fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: "20", // 文字字体大小
        lineHeight: "50", // 行高
      },
    },

    grid: {
      top: "20%",
      left: "2%",
      right: "1%",
      bottom: "2%",
      containLabel: true,
    },

    xAxis: {
      type: "category",

      data: x.value,

      axisLabel: {
        color: "#FEFEFE",
        fontSize: 19,
        fontWeight: 400,
        interval: 1, //标签显示间隔
      },
      axisTick: {
        show: false, // 是否显示刻度线
        lineStyle: {
          color: "#0D3E67",
          width: 2, // 坐标轴线线宽
          type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#0D3E67",
          width: 2,
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        show: true,
        type: "value",
        fontSize: 19,
        nameTextStyle: {
          color: "#666",
          fontSize: 19,
          padding: [0, 0, 0, 0],
        },
        axisLabel: {
          color: "#FEFEFE",
          fontSize: 19,
        },
        splitLine: {
          show: true, // 是否显示分割线
          lineStyle: {
            color: "#0D3E67",
            width: 2, // 分割线线宽
            type: "solid", // 分割线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
        axisLine: {
          show: false, // 是否显示坐标轴轴线
          lineStyle: {
            color: "#022552", // 坐标轴线线的颜色
            width: "2", // 坐标轴线线宽
            type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
      },
    ],
    legend: {
      data: ["温度", "湿度"], //图例名称
      right: "47%", //调整图例位置
      icon: "rect",

      padding: 20, //图例内边距
      itemWidth: 20, //图例图形宽度
      itemGap: 80, //图例图形间距
      top: 20, //调整图例位置
      itemHeight: 20, //修改icon图形大小

      textStyle: {
        fontSize: 19, //图例文字大小
        color: "#FEFEFE",
      },
    },
    series: [
      {
        name: "温度",
        type: "line",
        showSymbol: false, //是否显示symbol
        smooth: true,
        symbolSize: 8,
        itemStyle: {
          color: "#06FF34",
          borderWidth: 3,
        },

        data: y1.value,
      },
      {
        name: "湿度",
        type: "line",
        showSymbol: false, //是否显示symbol
        smooth: true,
        symbolSize: 8,
        itemStyle: {
          color: "#FFDA1C",
          borderWidth: 3,
        },
        // areaStyle: {
        //   normal: {
        //     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
        //     color: new echarts.graphic.LinearGradient(
        //       0,
        //       0,
        //       0,
        //       1,
        //       [
        //         {
        //           offset: 0,
        //           color: "#00D385", //0066FF
        //         },

        //         {
        //           offset: 1,
        //           color: "#fff",
        //         },
        //       ],
        //       false
        //     ),
        //   },
        // },
        data: y2.value,
      },
    ],
  });
};
</script>
<style lang="scss" scoped>
#line-chart {
  width: 100%;

  height: calc(100vh - 168px - 9px - 260px - 10px) !important;
}
</style>
